<template>
  <div class="p-2">
    <el-form
      :model="form"
      inline
      label-width="180"
      label-position="right"
      ref="formRef"
      :rules="rules"
    >
      <el-card>
        <template #header>
          <div class="card-header">
            <span>*基础信息(准确真实填写服务商基础信息)</span>
          </div>
        </template>

        <el-row :gutter="20">
          <el-col :span="8">
            <el-form-item
              label="服务商名称："
              required
              prop="gsmc"
            >
              <el-input
                v-model="form.gsmc"
                clearable
                placeholder="请输入服务商名称"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item
              label="区域："
              required
              prop="unitArea"
            >
              <el-cascader
                v-model="form.unitArea"
                :props="unitAreaNameOptions"
                @change="handleChangeAreaName"
              />
            </el-form-item>
          </el-col>

          <el-col :span="8">
            <el-form-item
              label="纳税人识别码："
              required
              prop="nsrSbh"
            >
              <el-input
                v-model="form.nsrSbh"
                clearable
                placeholder="请输入纳税人识别码"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item
              label="法人姓名："
              required
              prop="fr"
            >
              <el-input
                v-model="form.fr"
                clearable
                placeholder="请输入法人姓名"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item
              label="法人身份证号："
              required
              prop="frCardid"
            >
              <el-input
                v-model="form.frCardid"
                clearable
                placeholder="请输入法人身份证号"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item
              label="法人手机号："
              required
              prop="frPhone"
            >
              <el-input
                v-model="form.frPhone"
                clearable
                placeholder="请输入法人手机号"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item
              label="联系人姓名："
              required
              prop="conName"
            >
              <el-input
                v-model="form.conName"
                clearable
                placeholder="请输入联系人姓名"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item
              label="联系人手机号："
              required
              prop="conPhone"
            >
              <el-input
                v-model="form.conPhone"
                clearable
                placeholder="请输入联系人手机号"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item
              label="联系人身份证号："
              required
              prop="conCardid"
            >
              <el-input
                v-model="form.conCardid"
                clearable
                placeholder="请输入联系人身份证号"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item
              label="联系人邮箱："
              required
              prop="conEmail"
            >
              <el-input
                v-model="form.conEmail"
                clearable
                placeholder="请输入联系人邮箱"
              ></el-input>
            </el-form-item>
          </el-col>

          <el-col :span="8">
            <el-form-item
              label="实际经营地址："
              required
              prop="address"
            >
              <el-input
                v-model="form.address"
                clearable
                placeholder="请输入实际经营地址"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item
              label="经营范围："
              required
              prop="business"
            >
              <el-input
                v-model="form.business"
                clearable
                placeholder="请输入经营范围"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item
              label="税地归属："              
              prop="threeId"
            >
              <el-select
                v-model="form.threeId"
                placeholder="请选择税地归属"
                clearable
                filterable
              >
                <el-option
                  v-for="(item, i) in sysThirdPlatformList"
                  :label="item.platformName"
                  :value="item.id"
                  :key="item.id"
                />
              </el-select>
            </el-form-item>
            </el-col>
        </el-row>
      </el-card>
      <el-card>
        <template #header>
          <div class="card-header">
            <span>账户信息(结算账户主体名称必须跟服务商名称一致)</span>
          </div>
        </template>

        <el-row :gutter="20">
          <el-col :span="8">
            <el-form-item
              label="开户银行："
              required
              prop="kfh"
            >
              <el-select
                v-model="form.kfh"
                placeholder="请选择开户银行"
                clearable
                filterable
              >
                <el-option
                  v-for="(item, i) in bank_list"
                  :label="item.label"
                  :value="item.label"
                  :key="item.value"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item
              label="开户支行："
              required
              prop="kfd"
            >
              <el-input
                v-model="form.kfd"
                clearable
                placeholder="格式：***银行***市***支行"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item
              label="联行号："
              required
              prop="khhNo"
            >
              <el-input
                v-model="form.khhNo"
                clearable
                placeholder="请输入联行号"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item
              label="开户账号："
              required
              prop="bankCard"
            >
              <el-input
                v-model="form.bankCard"
                clearable
                placeholder="请输入开户账号"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-card>
      <el-card>
        <template #header>
          <div class="card-header">
            <span>资质（服务商三证资质彩照或盖章复印件）
              [上传图片格式仅支持png/jpg,大小不得超过2M]</span>
          </div>
        </template>

        <el-row :gutter="20">
          <el-col :span="8">
            <el-form-item
              label="营业执照："
              required
              prop="yyzz"
            >
              <imageUpload
                v-model="form.yyzz"
                modelKey="url"
                :limit="1"
                :isShowTip="false"
              />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item
              label="开户许可证："
              required
              prop="khxkz"
            >
              <imageUpload
                v-model="form.khxkz"
                modelKey="url"
                :limit="1"
                :isShowTip="false"
              />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item
              label="法人身份证正面："
              required
              prop="frSfzzm"
            >
              <imageUpload
                v-model="form.frSfzzm"
                modelKey="url"
                :limit="1"
                :isShowTip="false"
              />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item
              label="法人身份证反面："
              required
              prop="frSfzfm"
            >
              <imageUpload
                v-model="form.frSfzfm"
                modelKey="url"
                :limit="1"
                :isShowTip="false"
              />
            </el-form-item>
          </el-col>
        </el-row>
        <div class="footer">
          <el-popconfirm
            title="确定放弃编辑？"
            @confirm="closeWin"
          >
            <template #reference>
              <el-button>取消</el-button>
            </template>
          </el-popconfirm>
          <el-button
            :loading="buttonLoading"
            type="primary"
            @click="submitForm"
          >确 定</el-button>
        </div>
      </el-card>
    </el-form>
  </div>
</template>

<script setup name="addOrEditService" lang="ts">
import addEnterprise from '@/api/enterprise/addEnterprise';
import api from '@/api/service/addService';
import { addOrEditServiceForm } from '@/api/service/addService/types';
import { areaVo } from '@/api/enterprise/addEnterprise/types';
const props = defineProps({
  serviceId: {
    type: String,
    default: ''
  }
});

const { proxy } = getCurrentInstance() as ComponentInternalInstance;
const { agent_level, agent_type, bank_list } = toRefs<any>(proxy?.useDict('agent_type', 'agent_level', 'bank_list'));

const sysThirdPlatformList = ref([]);
const formRef = ref<ElFormInstance>();
const form = ref<addOrEditServiceForm>({
  id: '',
  gsmc: '',
  unitArea: '',
  unitAreaName: '',
  nsrSbh: '',
  fr: '',
  frCardid: '',
  frPhone: '',
  conName: '',
  conPhone: '',
  conCardid: '',
  conEmail: '',
  address: '',
  business: '',
  jbsl: '',
  khd: '',
  kfd: '',
  kfh: '',
  khhNo: '',
  bankCard: '',
  bankType: '',
  yyzz: '',
  khxkz: '',
  frSfzzm: '',
  frSfzfm: '',
  threeId: ''
});

const rules = ref({
  gsmc: [{ required: true, message: '请输入服务商名称', trigger: 'blur' }],
  unitArea: [{ required: true, message: '请选择区域', trigger: 'change' }],
  nsrSbh: [{ required: true, message: '请输入纳税人识别码', trigger: 'blur' }],
  fr: [{ required: true, message: '请输入法人姓名', trigger: 'blur' }],
  frCardid: [{ required: true, message: '请输入法人身份证号', trigger: 'blur' }],
  frPhone: [{ required: true, pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/, message: '请输入正确的法人手机号', trigger: 'blur' }],
  conName: [{ required: true, message: '请输入联系人姓名', trigger: 'blur' }],
  conPhone: [{ required: true, pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/, message: '请输入正确的联系人手机号', trigger: 'blur' }],
  conCardid: [{ required: true, message: '请输入联系人身份证号', trigger: 'blur' }],
  conEmail: [{ required: true, message: '请输入联系人邮箱', trigger: 'blur' }],
  address: [{ required: true, message: '请输入实际经营地址', trigger: 'blur' }],
  business: [{ required: true, message: '请输入经营范围', trigger: 'blur' }],
  kfh: [{ required: true, message: '请选择开户银行', trigger: 'blur' }],
  kfd: [{ required: true, message: '请输入开户支行', trigger: 'blur' }],
  khhNo: [{ required: true, message: '请输入联行号', trigger: 'blur' }],
  bankCard: [{ required: true, message: '请输入开户账号', trigger: 'blur' }],
  yyzz: [{ required: true, message: '请上传营业执照', trigger: 'change' }],
  khxkz: [{ required: true, message: '请上传开户许可证', trigger: 'change' }],
  frSfzzm: [{ required: true, message: '请上传法人身份证正面', trigger: 'change' }],
  frSfzfm: [{ required: true, message: '请上传法人身份证反面', trigger: 'change' }]
});

import type { CascaderProps, CascaderValue } from 'element-plus';
const unitAreaNameOptions: CascaderProps = {
  lazy: true,
  async lazyLoad(node, resolve) {
    const { level } = node;
    let nodes = [];
    var parentId = level == 0 ? 0 : node.data?.value;
    let res = await addEnterprise.areaQueryList(parentId);
    nodes = res.data.map((item: areaVo) => {
      return {
        value: item.areaId,
        label: item.areaName,
        leaf: item.level >= 2 ? true : false
      };
    });
    resolve(nodes);
  }
};

const areaList = ref([]);
const handleChangeAreaName = async (value: CascaderValue) => {
  if (!areaList.value.length) {
    let res = await addEnterprise.areaQueryList();
    areaList.value = res.data;
  }
  let arr: Array<string> = [];
  areaList.value.forEach((area: areaVo) => {
    (value as any).forEach((e: string | number) => {
      if (area.areaId == e) {
        arr.push(area.areaName);
      }
    });
  });
  form.value.unitAreaName = arr[0] + '/' + arr[1];
  console.log(form.value.unitArea);
  console.log(form.value.unitAreaName);
};

const closeWin = ()=>{
  const obj = { path: "/service/addService" };
  proxy?.$tab.closeOpenPage(obj);
}

const route = useRoute();
/** 查询服务商信息 */
const getInfoData = async () => {
  const res = await api.serviceDetail(props.serviceId);
  form.value = res.data;
  if (form.value.unitArea) {
    let arr: any = form.value.unitArea ? form.value.unitArea?.split(',') : [];
    setTimeout(() => {
      arr = [parseInt(arr[0]), parseInt(arr[1])];
      form.value.unitArea = arr;
    }, 800);
  }
};
const buttonLoading = ref<boolean>(false);
const submitForm = () => {
  formRef.value?.validate(async (valid: boolean) => {
    if (valid) {
      buttonLoading.value = true;
      let obj = {
        ...form.value,
        domain:location.origin,
        unitArea: form.value.unitArea?.toString()
      };
      buttonLoading.value = true;
      console.log(obj,form.value.threeId);
      let res = await api.addOrEditService(obj, props.serviceId ? 'put' : 'post').finally(() => buttonLoading.value = false);
      console.log(res);
      buttonLoading.value = false;
      proxy?.$modal.msgSuccess(res.msg);
      proxy?.$router.go(-1);
      proxy?.$tab.closePage(route);
    }
  });
};
onMounted(() => {
  api.getSysThirdPlatformList().then(res=>{
      sysThirdPlatformList.value = res;
      console.log(res,'res');
    });
  if (props.serviceId) {
    getInfoData(); // 查询服务商信息
    
  }
});
</script>

<style lang="scss" scoped>
.el-card {
  margin-bottom: 20px;

  &:last-child {
    margin-bottom: 0;
  }

  .el-form-item {
    width: 100%;

    .el-select {
      width: 100%;
    }
  }
}

.footer {
  text-align: center;
  padding: 36px 0 16px;
}

:deep(.el-cascader) {
  width: 100%;
}
</style>
